
<template>
  <div class="slide" v-if="show" @click="slideHandle">
    <!-- component-slid-open 和 component-slid-out 是keyframes动画效果的 -->
    <div :class="showSlid ? 'component-slid-open' : 'component-slid-out'">
      <!-- 在组件内书写内容slot接收嘛 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: "slide",
  props: {
    showSlid: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
    };
  },
  created() {},
  mounted() {},
  updated() {
    //   -于这里给了一个延时器  主要是为了 返回时能完成 回退的一个动画效果
    setTimeout(() => {
      this.show = this.showSlid;
    }, 300);
  },
  methods: {
    slideHandle() {
      this.$emit("slideHandle");
    },
  },
};
</script>
<style scoped>
.slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(000, 000, 000, 0.3);
  z-index: 2300;
}
.component-slid-open {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  background: #fff;
  opacity: 1;
  animation: slid-open 0.5s ease;
}
.component-slid-out {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 100%;
  background: #fff;
  animation: slid-out 0.5s ease;
}
@keyframes slid-open {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slid-out {
  0% {
    width: 70%;
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
</style>
